<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>搜索结果</title>
		<meta name="decorator" content="default"/>
		<script type="text/javascript" src="${ctxStatic }/js/hidden_nav.js"></script>
		<link href="${ctxStatic}/jquery-pagination/pagination.css" rel="stylesheet" />
		<script type="text/javascript" src="${ctxStatic }/jquery-pagination/jquery-pagination.js"></script>
		<script type="text/javascript">
			var pagenum=parseInt("${pageNo-1}");
			var pagesize=parseInt("${pageSize}");
			var totalCount=parseInt("${count}");
			$(function(){
				//加载商品分类
				var url_cate = "${ctx}/procatelist";
				$("#procate").load(url_cate);				
				
				// 创建分页元素				
				$("#Pagination").pagination(totalCount, {
					num_edge_entries: 2,
					current_page: pagenum,
					items_per_page: pagesize,
					num_display_entries: pagesize,
					prev_text: "上一页",
					next_text:"下一页",
					num_display_entries: 8,
					callback: pageselectCallback  //回调函数
				});
				
				$(".saledownbox .sale_numbox").children("input").each(function(){
					var o = $(this);
					
					$(this).numeral();
					var id = $(this).parent().next().val();
					calcPrice(id, $(this).val());
					
					$(this).on("blur keyup",function(){
						var id = $(this).parent().next().val();
						calcPrice(id, $(this).val());
					})
					
					$(this).prev().on("click", function(){
						var n = parseInt(o.val());
						if(n>1){
							o.val(n-1);
							var id = $(this).parent().next().val();
							calcPrice(id, o.val());
						}
					})
					
					$(this).next().on("click", function(){
						var n = parseInt(o.val());
						o.val(n+1);
						var id = $(this).parent().next().val();
						calcPrice(id, o.val());
					})
					
				})
				
				$(".saledownbox .sale_btn").children("button").each(function(){
					var prodid = parseInt($(this).prev().val());
					var num = parseInt($(this).parent().prev().prev().children("input").val());
					$(this).on("click", function(){
						addToCart(prodid, num);
					})					
				})
			})
			
			/*
			* 动态获取计算价格
			*/			
			function calcPrice(id, num){
				$.post("${ctx}/getprice",
					{"id":id, "num": num},
					function(price){
						$("#price"+id).text(price);
					}
				);
			}
			
			/*
			   添加到购物车 
			 */
			function addToCart(id, num){				
				$.post("${ctx}/addtocart",
					   {"id":id, "num": num},
					   function(message){//返回值为提示信息						   
					   	  if (message == '9998'){//session失效
					   	  	  window.location="${ctx}/login";
					   	  }					   
					   	$.jBox.messager('添加到购物车成功', '购物车');
					   }
				);				
			}
			
			function pageselectCallback(page_id, jq){
				$("#pageNo").val(page_id+1);
				$("#pageForm").submit();			
			}
		</script>
	</head>
<body>
<div class="main_centerbox">
	<div class="centerbox clearfix">
    	<div class="main_upbox clearfix">
        	<div class="navbox" id="procate">
       			<!-- 商品类别 --> 
            </div>
        	<div class="Commoditybox">
            	<div class="Commoditytit">
        			<h2 class="sub_com_tit01">首页</h2>
            		>
            		<h3 class="sub_com_tit02">${categoryPath}</h3>
            		
        		</div>
                <div class="salebox">
                	<ul class="clearfix">
                	<c:forEach var="prod" items="${prodList }" varStatus="status">                	
                    	<li class="single-sale" <c:if test="${status.index % 4 =='3' }">style="margin-right:0px;"</c:if>>
                        	<div class="status_avil">
                        		<a href="${ctx }/prodetail?id=${prod.id}">                    
	                    			<c:if test="${not empty prod.pics}">
	                    				<c:set value="${fn:split(prod.pics, '|')}" var="pic" />
	                    				<img src="${svr_url}${pic[0]}" style="width:193px;height:190px;"/>
	                    			</c:if>
	                    			<c:if test="${empty prod.pics}">                    	
	                    				<img src="${ctxStatic }/images/defaultprod.jpg" style="width:193px;height:190px;"/>
	                    			</c:if>
                   				</a>
                                <div class="sale_price"><i>￥</i><span id="price${prod.id}">0.0</span></div>
                                <h3><span class="sale_tit" title="${prod.proName}"><a href="${ctx }/prodetail?id=${prod.id}">${prod.proName}</a>&nbsp;</span></h3>
                                <h4><span class="sale_function" title="${prod.dosageForm }/${prod.etalon }/${prod.unit }">${prod.dosageForm }/${prod.etalon }/${prod.unit }</span></h4>
                                <div class="saledownbox">
                                	<div class="sale_numbox">
                                    	<span class="sale_add">-</span>
                                        <input value="1" title="请输入购买量" maxlength="6"></input>
                                        <span class="sale_add">+</span>
                                    </div>
                                    <input type="hidden" id="prodid" value="${prod.id }"/>
                                    <div class="sale_btn"><button>加入购物车</button></div>
                                </div>
                            </div>
                        </li>
                    </c:forEach>                        
                    </ul> 
                </div>
                <div class="zxdt_xinwen_list">
                	<div id="Pagination" class="pagination"></div>
					<form id="pageForm" method="post" action="${ctx }/searchresult">
						<input type="hidden" id="pageNo" name="pageNo" value="${pageNo }"/>
						<input type="hidden" id="pageSize" name="pageSize" value="${pageSize }"/>
					</form>
                </div>
<!--                 <div class="zxdt_xinwen_list"> -->
<!--                 	<ul> -->
<!--                     	<li class="active"><span class="current_prev">上一页</span></li> -->
<!--                         <li class="active_prev"><span class="current">1</span></li> -->
<!--                         <li><a class="page-link" href="#">2</a></li> -->
<!--                         <li><a class="page-link" href="#">3</a></li> -->
<!--                         <li class="disabled"><a class="ellipse" href="#">...</a></li> -->
<!--                         <li><a class="page-link" href="#">9</a></li> -->
<!--                         <li><a class="page-link" href="#">10</a></li> -->
<!--                         <li><a class="page_next" href="#">下一页</a></li> -->
<!--                     </ul> -->
<!--                 </div> -->
            </div>
        </div>       
    </div>
</div>
</body>
</html>